<template>
  <header class="navbar">
    <div class="container mx-auto px-4">
      <div class="navbar-content flex items-center justify-between h-24">
        <!-- Logo -->
        <router-link to="/" class="logo flex items-center">
          <span class="logo-text">
            {{ $t('company.name') }}
          </span>
        </router-link>

        <!-- Desktop Navigation -->
        <div class="flex items-center space-x-2">
          <nav class="hidden md:flex space-x-2">
            <router-link 
              v-for="(item, key) in navItems" 
              :key="key"
              :to="item.path"
              class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 rounded-full transition-all"
              active-class="text-blue-600 font-semibold bg-blue-50"
            >
              {{ item.label }}
            </router-link>
          </nav>

          <!-- 微信二维码 -->
          <div class="wechat-qr-wrapper relative ml-4">
            <button 
              class="wechat-btn flex items-center justify-center w-10 h-10 rounded-full bg-green-50 text-green-600 hover:bg-green-100 transition-all"
              @mouseenter="showQR = true"
              @mouseleave="showQR = false"
              @click="showQR = !showQR"
              @touchstart="showQR = !showQR"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-2.677-3.238-4.74-6.001-4.74zM5.785 5.991c.642 0 1.162.529 1.162 1.18 0 .653-.52 1.182-1.162 1.182-.642 0-1.162-.529-1.162-1.182 0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18 0 .653-.52 1.182-1.162 1.182-.642 0-1.162-.529-1.162-1.182 0-.651.52-1.18 1.162-1.18zm-1.007 6.926c-2.097-.105-4.185-.648-5.933-1.909a7.88 7.88 0 0 1-2.343-2.894c.346.993 1.068 1.916 2.017 2.59 1.892 1.061 4.26 1.541 6.268 1.593l-.01.022a8.167 8.167 0 0 1-.005-.056zm1.391.883c.012.098.018.198.018.301 0 .615-.08 1.21-.22 1.782-.058.236.032.476.226.672a.776.776 0 0 0 .667.234c1.815-.198 3.646-.772 5.399-1.668 1.343-.697 2.544-1.459 3.61-2.293-.797-.47-1.68-.853-2.64-1.128l-.135-.029c-.41-.084-.766.204-.767.629-.002.453.384.768.783.948l.08.034c.63.277 1.228.603 1.788.967a13.14 13.14 0 0 1-2.822 2.464 14.003 14.003 0 0 1-3.04 1.55.704.704 0 0 1-.658-.039.742.742 0 0 1-.298-.458 12.214 12.214 0 0 1-.23-2.454v-.1c-.002-.508-.368-1.057-.775-1.245a6.213 6.213 0 0 0-1.677-.478 7.488 7.488 0 0 0-1.827-.008l-.003.004z"/>
              </svg>
            </button>
            
            <!-- 二维码弹窗 -->
            <transition name="fade">
              <div v-if="showQR" class="qr-popup absolute right-0 top-12 md:top-12 bottom-auto md:bottom-auto bg-white rounded-lg shadow-xl p-4 z-50" @click.stop>
                <img 
                  src="@/assets/wacht/二维码.png" 
                  alt="微信二维码"
                  class="w-32 h-32 md:w-48 md:h-48 object-contain"
                />
                <p class="text-center text-xs md:text-sm text-gray-600 mt-2">扫码加微信</p>
              </div>
            </transition>
          </div>
        </div>

        <!-- Mobile Menu Button -->
        <button 
          class="md:hidden text-gray-700"
          @click="toggleMenu"
        >
          <svg v-if="!isMenuOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile Navigation -->
    <transition name="slide-down">
      <div v-if="isMenuOpen" class="md:hidden bg-white shadow-lg">
        <div class="container mx-auto px-4 py-4">
          <nav class="flex flex-col space-y-4">
            <router-link 
              v-for="(item, key) in navItems" 
              :key="key"
              :to="item.path"
              class="nav-link text-gray-800 hover:text-blue-600 py-2 px-3 rounded-lg transition-colors"
              active-class="text-blue-600 font-semibold bg-blue-50"
              @click="closeMenu"
            >
              {{ item.label }}
            </router-link>
          </nav>
        </div>
      </div>
    </transition>
  </header>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '../store'

const router = useRouter()
const store = useAppStore()
const { t } = useI18n()

// 微信二维码显示状态
const showQR = ref(false)

const navItems = [
  { path: '/', label: computed(() => t('nav.home')) },
  { path: '/about', label: computed(() => t('nav.about')) },
  { path: '/products', label: computed(() => t('nav.products')) },
  { path: '/cases', label: computed(() => t('nav.cases')) },
  { path: '/news', label: computed(() => t('nav.news')) },
  { path: '/contact', label: computed(() => t('nav.contact')) }
]

const isMenuOpen = computed(() => store.getIsMenuOpen)

const toggleMenu = () => {
  store.toggleMenu()
}

const closeMenu = () => {
  store.closeMenu()
}

const handleResize = () => {
  const isMobile = window.innerWidth < 768
  store.setIsMobile(isMobile)
  if (!isMobile) {
    closeMenu()
  }
}

onMounted(() => {
  handleResize()
  window.addEventListener('resize', handleResize)
  router.afterEach(() => {
    closeMenu()
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.navbar {
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-content {
  position: relative;
  min-height: 3rem;
}

@media (max-width: 768px) {
  .navbar-content {
    height: auto;
    min-height: 4rem;
    padding: 0.5rem 0;
  }
  
  .logo-text {
    font-size: 1rem;
  }
}

.logo {
  height: 100%;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: translateY(-2px);
}


.logo-text {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #2563eb, #6366f1);
  letter-spacing: -0.5px;
}

.nav-link {
  position: relative;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0.5rem;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #6366f1);
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link.router-link-active::after {
  width: 80%;
}

.nav-link:hover {
  background: rgba(37, 99, 235, 0.05);
}

.nav-link.router-link-active {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  font-weight: 600;
}

/* 移动端菜单样式增强 */
.md\:hidden.bg-white.shadow-lg {
  border-radius: 0 0 12px 12px;
  padding-bottom: 1rem;
}

.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-down-enter-from,
.slide-down-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 微信二维码样式 */
.wechat-btn {
  border: none;
  cursor: pointer;
}

.wechat-qr-wrapper {
  position: relative;
}

.qr-popup {
  animation: fadeInDown 0.3s ease;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .qr-popup {
    right: 0;
    left: auto;
    margin-top: 8px;
    max-width: calc(100vw - 2rem);
  }
  
  .wechat-qr-wrapper {
    margin-left: 0.5rem;
  }
}

.qr-popup::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 20px;
  border: 10px solid transparent;
  border-bottom-color: white;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>